<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="d3.min.js"></script>
    <script>
        const dataset = [[18,162], [114,403], [261,98] ];

        const width = 500;
        const height = 500;

        const voronoi = d3.geom.voronoi()
        .clipExtent([[0,0],[width,height]])


        const data = voronoi(dataset)

        console.log(data);

        const svg = d3.select("body")
        .append("svg")
        .attr("width",width)
        .attr("height",height)

        const color = d3.scale.category10();

        const path = svg
        .append('g')
        .selectAll("path")
        .data(data)
        .enter()
        .append("path")
        .attr("fill",(d,i)=>{
            return color(i+1)
        })
         .attr("d", function(d,i){
       return "M" + d.join("L") + "Z";
     });

        console.log(path);
    </script>
</body>
</html>